$(function () {
    // alert('ok')
    /* 效果一：获取所有的分类数据，渲染到下拉列表 */
    initCate()

    function initCate() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                // console.log(res);
                // 使用模板引擎将数据渲染到下拉列表
                var htmlStr = template('tpl_alias', res)
                $('select[name=cate_id]').html(htmlStr)
                // 手动渲染 --下拉列表是动态创建的
                layui.form.render()

            }
        })
    }

    /* 效果二：初始化富文本编辑器 */
    // 初始化富文本编辑器
    initEditor()
    /* 效果三：初始化图片裁剪区 */
    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)
    //单击选择封面，弹出文件选择框
    $('#btnChooseImage').on('click', function () {
        $('#coverFile').click()
    })

    // 注册change事件，更换裁剪区的图片
    $('#coverFile').on('change', function () {
        // console.log('ok');
        var files = this.files[0]
        // console.log(files);
        var newImgURL = URL.createObjectURL(files)
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })

    /* 准备文章状态数据 ， 
         用一个全局变量，保存status的值
     */
    var state = '已发布'
    $('#btnSave2').on('click', function () {
        state = '草稿'
    })
    /* 效果三：发布文字 */
    $('#form-pub').on('submit', function (e) {
        // console.log('ok');
        e.preventDefault()
        // console.log(statu);
        // 收集数据 - 此时只能收集到表单数据，只有三个

        var fd = new FormData(this)
        fd.append('state', state)

        // 裁剪封面图片，并转成二进制图片
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) { // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作,将转换的img图片，追加到fd
                fd.append('cover_img', blob)
                // fd.forEach(function (value) {
                //     console.log(value);
                // })
                publishArticle(fd)
              
            })

    })

    /* 封装一个ajax请求函数 */
    function publishArticle(fd) {
        $.ajax({
            method: "post",
            url: "/my/article/add",
            contentType:false,
            processData:false,
            data: fd,
            success(res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message,{icon:5})
                }
                layui.layer.msg(res.message, { icon: 6 }, function () {
                     // 发布成功,提示后，跳转到文章列表页
                    // location.href = '/article/art_list.html'
                    // 
                    window.parent.document.querySelector('#artice_list').click()
                })
               
            }
        })
    }
})